<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      .tab-active {
        color: #7c3aed; /* purple-600 */
      }

      .tab-inactive {
        color: #6b7280; /* gray-500 */
      }
    </style>
    <script>
      // 检测当前页面路径并高亮对应标签
      window.onload = function () {
        const currentPath = window.parent.location.pathname;
        const homeTab = document.getElementById("tab-home");
        const resumeTab = document.getElementById("tab-resume");
        const serviceTab = document.getElementById("tab-service");
        const profileTab = document.getElementById("tab-profile");

        console.log("当前路径:", currentPath);

        // 高亮显示当前标签
        if (
          currentPath.includes("/home") ||
          currentPath === "/" ||
          currentPath.endsWith("/pr/") ||
          currentPath.endsWith("/pr/index.html")
        ) {
          homeTab.classList.remove("tab-inactive");
          homeTab.classList.add("tab-active");
        } else if (currentPath.includes("/resume")) {
          resumeTab.classList.remove("tab-inactive");
          resumeTab.classList.add("tab-active");
        } else if (currentPath.includes("/service")) {
          serviceTab.classList.remove("tab-inactive");
          serviceTab.classList.add("tab-active");
        } else if (currentPath.includes("/profile")) {
          profileTab.classList.remove("tab-inactive");
          profileTab.classList.add("tab-active");
        }

        // 为所有链接添加点击事件，在iframe环境中改变父页面的导航
        homeTab.addEventListener("click", function (e) {
          e.preventDefault();
          navigateParentFrame("/pr/home.html");
        });

        resumeTab.addEventListener("click", function (e) {
          e.preventDefault();
          navigateParentFrame("/pr/resume/list.html");
        });

        serviceTab.addEventListener("click", function (e) {
          e.preventDefault();
          navigateParentFrame("/pr/service/list.html");
        });

        profileTab.addEventListener("click", function (e) {
          e.preventDefault();
          navigateParentFrame("/pr/profile/index.html");
        });
      };

      // 在iframe环境中控制父页面导航
      function navigateParentFrame(fullPath) {
        try {
          // 从完整路径中提取相对于pr目录的路径
          let relativePath = fullPath;
          const prIndex = fullPath.indexOf("/pr/");
          if (prIndex !== -1) {
            relativePath = fullPath.substring(prIndex + 4); // +4 跳过"/pr/"
          }

          console.log("导航到相对路径:", relativePath);

          // 尝试获取父页面的iframe元素
          const parentFrame =
            window.parent.document.getElementById("prototype-frame");
          if (parentFrame) {
            parentFrame.src = relativePath;

            // 更新父页面上的按钮状态
            const buttons =
              window.parent.document.querySelectorAll(".page-button");
            buttons.forEach((btn) => {
              if (btn.getAttribute("data-page") === relativePath) {
                btn.classList.add("active");
              } else {
                btn.classList.remove("active");
              }
            });
          } else {
            console.log("找不到父页面的iframe元素");
            // 如果在实际部署环境中，直接跳转
            window.parent.location.href = fullPath;
          }
        } catch (e) {
          console.error("导航错误:", e);
          // 如果出现跨域问题，直接跳转
          window.parent.location.href = fullPath;
        }
      }
    </script>
  </head>
  <body>
    <div
      class="h-16 bg-white border-t border-gray-200 flex items-center justify-around px-4"
    >
      <!-- 首页 -->
      <a href="#" class="flex flex-col items-center tab-inactive" id="tab-home">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
          />
        </svg>
        <span class="text-xs mt-1">首页</span>
      </a>

      <!-- 简历 -->
      <a
        href="#"
        class="flex flex-col items-center tab-inactive"
        id="tab-resume"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
          />
        </svg>
        <span class="text-xs mt-1">简历</span>
      </a>

      <!-- 服务 -->
      <a
        href="#"
        class="flex flex-col items-center tab-inactive"
        id="tab-service"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M13 10V3L4 14h7v7l9-11h-7z"
          />
        </svg>
        <span class="text-xs mt-1">服务</span>
      </a>

      <!-- 我的 -->
      <a
        href="#"
        class="flex flex-col items-center tab-inactive"
        id="tab-profile"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
          />
        </svg>
        <span class="text-xs mt-1">我的</span>
      </a>
    </div>
  </body>
</html>
